@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;900&display=swap);

body {
    margin: 0
}

.button-area {
    grid-gap: 0 0;
    background-color: #f9f9f9;
    border: 1px solid #c3c3c3;
    border-radius: 3px;
    display: grid;
    gap: 0 0;
    grid-auto-flow: row;
    grid-template-columns: .5fr 1.6fr .7fr;
    grid-template-rows: 1fr;
    height: 74px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    z-index: 1
}

.grid-child {
    align-items: center;
    display: grid;
    justify-items: center;
    margin: auto
}

.grid-child-text {
    margin-bottom: auto;
    margin-top: auto
}

.button-wrapper {
    display: grid
}

.button,
.check {
    grid-area: 1/1
}

.check {
    filter: invert(34%) sepia(94%) saturate(1728%) hue-rotate(120deg) brightness(100%) contrast(82%);
    height: 35%
}

.button {
    background-color: #fff;
    border: 2px solid #c1c1c1;
    border-radius: 2px;
    height: 28px;
    width: 28px
}

.hidden {
    display: none
}

.button:hover {
    border-color: #b2b2b2;
    box-shadow: inset 0 1px 1px 0 #0000001a
}

.text {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400
}

.logo {
    width: 60px
}

.popup {
    background-color: #fff;
    border: 7px solid #fff;
    gap: 10px 0;
    grid-auto-flow: column;
    grid-template-columns: 1fr;
    grid-template-rows: auto 5fr 1fr;
    height: 430px;
    outline: 1px solid #eee;
    position: relative;
    width: 400px
}

.popup-wrapper {
    position: relative;
    transition: opacity .2s ease;
    z-index: 100
}

.popup-header {
    background-color: #1a73e8
}

.popup-header-red {
    background-color: #de5246
}

.popup-header-green {
    background-color: #1aa260
}

.popup-header-text {
    color: #fff;
    font-family: Roboto, sans-serif;
    margin-bottom: 6px;
    padding: 25px
}

.popup-header-text h1 {
    font-size: 28px;
    font-weight: 900;
    line-height: 100%
}

.popup-header-text h3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 0%
}

.popup-header-text h4 {
    font-size: 15px;
    font-weight: 300;
    line-height: 0%
}

.popup-footer {
    grid-gap: 0 10px;
    border-top: 1px solid #eee;
    display: grid;
    gap: 0 10px;
    grid-template-areas: "timer blank submit";
    grid-template-columns: .7fr 1.2fr 1.1fr;
    grid-template-rows: 1fr;
    padding: 12px 4px 4px
}

.submit-button {
    background-color: #1a73e8;
    border: 0;
    border-radius: 2px;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    grid-area: submit;
    outline: 0
}

.challenge {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%
}

.challenge-input {
    background-color: #1a73e83a;
    border: 2px solid #1a73e8;
    border-radius: 3px;
    color: #000;
    font-family: Roboto, sans-serif;
    font-size: 24px;
    font-weight: 500;
    padding: 5px
}

.challenge-input:focus {
    border-color: #1a73e8c2
}

#popup {
    display: none
}

#popup[data-show] {
    display: grid
}

.timer .value {
    font-size: 16px;
    font-weight: 900
}

.timer,
.timer .value {
    color: #777;
    font-family: Roboto, sans-serif
}

.timer {
    font-size: 12px;
    font-weight: 500;
    grid-area: timer
}

/*# sourceMappingURL=main.bddf8fcd.css.map*/